<template>
	<view class="page" style="padding-bottom: 50rpx;">
		<view class="topVue">
			<view class="safeVue" :style="{ height: statusBarHeight + 'rpx' }"></view>
			<view class="flex align-center padding-row30" :style="{ height: barHeight + 'rpx', top: statusBarHeight + 'rpx' }" @click="$tools.back()">
				<image src="../../static/back.png" style="width: 48rpx; height: 48rpx;"></image>
				<text style="line-height: 1; color: #454545; font-weight: 600; font-size: 32rpx; padding-left: 20rpx;">{{ detail.homecareName }}</text>
			</view>
		</view>
		<view :style="{ height: statusBarHeight + barHeight + 'rpx' }"></view>
		<view class="box margin20 flex-between align-center" style="padding: 0;">
			<view class="flex align-center">
				<image :src="detail.imgUrl" style="width: 140rpx; height: 140rpx; border-radius: 20rpx 0 0 20rpx;"></image>
				<text style="color: #454545; line-height: 1; font-weight: 600; padding-left: 20rpx;">预定金额：</text>
			</view>
			
			<text style="color: #DFA0A4; line-height: 1; font-size: 32rpx; font-weight: 600;padding-right: 30rpx;">￥{{ detail.deposit }}</text>
		</view>
		<view class="box margin20 flex-between align-center" @click="$tools.route('./store', detail.id)">
			<view style="width: 120rpx; color: #454545; line-height: 1; font-weight: 600;">店铺：</view>
			<view class="flex-between align-center flex-1">
				<input type="text" placeholder="请选择店铺" v-model="shopName" disabled/>
				<image src="../../static/more.png" style="width: 38rpx; height: 38rpx;"></image>
			</view>
		</view>
		<view class="box margin20 flex-between align-center">
			<view style="width: 120rpx; color: #454545; line-height: 1; font-weight: 600;">手机号：</view>
			<view class="flex-between align-center flex-1">
				<input type="text" placeholder="请输入手机号" v-model="phone"/>
			</view>
		</view>
		<view class="box margin20 flex-between align-center" @click="isCar=true" v-if="detail.homecareName==='移动洗车'">
			<view style="width: 120rpx; color: #454545; line-height: 1; font-weight: 600;">车牌号：</view>
			<view class="flex-between align-center flex-1">
				<input type="text" placeholder="请输入车牌号" v-model="carNumber" disabled/>
			</view>
		</view>
		<view class="box margin20 flex-between align-center" @click="isTime=true">
			<view style="width: 120rpx; color: #454545; line-height: 1; font-weight: 600;">时间：</view>
			<view class="flex-between align-center flex-1">
				<input type="text" placeholder="选择上门时间" v-model="time" disabled/>
				<image src="../../static/more.png" style="width: 38rpx; height: 38rpx;"></image>
			</view>
		</view>
		<view class="box margin20 flex-between align-center" @click="isAddress=true">
			<view style="width: 120rpx; color: #454545; line-height: 1; font-weight: 600;">区域：</view>
			<view class="flex-between align-center flex-1">
				<input type="text" placeholder="选择区域" v-model="area" disabled/>
				<image src="../../static/more.png" style="width: 38rpx; height: 38rpx;"></image>
			</view>
		</view>
		<view class="box margin20 flex-between align-center">
			<view style="width: 120rpx; color: #454545; line-height: 1; font-weight: 600;">地址：</view>
			<view class="flex-between align-center flex-1">
				<input type="text" placeholder="输入详细地址" v-model="address"/>
			</view>
		</view>
		<view class="box margin20">
			<textarea placeholder="说明情况" v-model="remark"></textarea>
		</view>
		
		<view class="btn margin40" @click="submit()">提交</view>
		
		<u-picker mode="time" v-model="isTime" :params="params" confirm-color="#D37430" @confirm="timeConfirm"></u-picker>
		<u-picker mode="region":default-region="defaultRegion" v-model="isAddress" confirm-color="#D37430" @confirm="addressConfirm"></u-picker>
		<u-keyboard ref="uKeyboard" mode="car" v-model="isCar" @change="carNumberChange" @backspace="backspace"></u-keyboard>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		data(){
			return {
				statusBarHeight: 0,
				barHeight: 0,
				storeName: "",
				phone: "",
				time: "",
				area: "",
				address: "",
				remark: "",
				carNumber: "",
				shopName: "",
				shopId: "",
				detail: {},
				isTime: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				isAddress: false,
				isCar: false,
				defaultRegion: ["湖北省", "武汉市", "江岸区"]
			}
		},
		onLoad(option) {
			let that = this;
			wx.getSystemInfo({
				success(res) {
					let deviceWidth = wx.getSystemInfoSync().windowWidth
					that.statusBarHeight = Number(res.statusBarHeight) * ( 750 / deviceWidth ) 
					let menuButtonInfo = wx.getMenuButtonBoundingClientRect()
					let barHeight = menuButtonInfo.height + (menuButtonInfo.top - res.statusBarHeight) * 2
					that.barHeight = Number(barHeight) * ( 750 / deviceWidth )
				},
			});
			this.detail = JSON.parse(decodeURIComponent(option.item));
			console.log(this.detail)
		},
		
		async onShow() {
			
		},
		
		computed: {
			...mapState({
				user: state=> state.user
			})
		},
		
		methods: {
			// 选择时间
			timeConfirm(e){
				console.log(e)
				this.time = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`
			},
			
			
			
			// 选择区域
			addressConfirm(e){
				console.log(e)
				this.area = `${e.province.label}-${e.city.label}-${e.area.label}`
			},
			
			// 按键被点击(点击退格键不会触发此事件)
			carNumberChange(e){
				console.log(e)
				this.carNumber += e;
			},
			
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if(this.carNumber.length) this.carNumber = this.carNumber.substr(0, this.carNumber.length - 1);
				console.log(this.carNumber);
			},
			
			// 提交
			async submit(){
				if(!this.shopId) return this.$u.toast("请选择店铺")
				if(!this.phone) return this.$u.toast("请输入手机号")
				if(!this.area) return this.$u.toast("请选择区域")
				if(!this.address) return this.$u.toast("请输入地址")
				const result = await this.$request("/api/WeChat/homecareOrder", {
					userId: this.user.id,
					officePhone: this.detail.phoneNo,
					shopId: this.shopId,
					homecareId: this.detail.id,
					officeName: this.detail.officeName,
					shopName: this.shopName,
					homecareName: this.detail.homecareName,
					deposit: "", //家事定金
					price: "",  //家事价格
					phoneNo: this.phone,
					area: this.area,
					address: this.address,
					visitTime: this.time,
					carNo: this.carNumber,
					description: this.remark
				})
				if(result.code===200) {
					this.$u.toast("提交成功");
					this.shopId = ""
					this.shopName = ""
					this.phone = ""
					this.area = ""
					this.address = ""
					this.time = ""
					this.carNumber = ""
					this.remark = ""
					setTimeout(()=>{
						this.$tools.back()
					}, 1000)
				}else {
					this.$u.toast(result.msg);
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.topVue {
		width: 100%;
		background: #fff;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
		.safeVue {
			width: 100%;
		}
	}
	
	.box {
		width: 690rpx;
		padding: 30rpx;
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
		input {
			flex: 1;
			color: #454545;
			display: block;
			line-height: 1;
			font-size: 28rpx;
		}
		textarea {
			width: 100%;
			height: 160rpx;
			display: block;
			box-sizing: border-box;
			display: block;
			font-size: 28rpx;
			color: #454545;
		}
	}
	
	.btn {
		width: 690rpx;
		height: 86rpx;
		background: #D37430;
		border-radius: 16rpx;
		line-height: 86rpx;
		text-align: center;
		color: #fff;
	}
</style>